<!DOCTYPE html>
<html lang="zh-CN">
<!-- weypoint sorted -->

<head>
    <meta charset="utf-8">
    <meta name=”Keywords” Content=”火星翻译″>
    <meta name=”Description” Content=”你网页的简述”>
    <title>Document</title>
    <script src="F:\js\jstest\js\jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="F:\js\jstest\js\sort\sortable.js"></script>
    <script type="text/javascript" src="F:\js\jstest\js\waypoint\jquery.waypoints.min.js"></script>
    <style>
    li {
        width: 100px;
        list-style-type: none;
        float: left;
        /*display: inline-block;*/
        border: 1px solid #f00;
        margin-left: 10px;
        margin-top: 10px;
        padding: 2px 4px;
        cursor: pointer;
        text-align: center;
    }


    li:hover {
        background: #eee;
    }

    .clear-fix {
        clear: both;
    }
    </style>
</head>

<body>
    <!-- div#container.container tab -->
    <div class="container" id="container">
        <!-- ur>li.item*5 tab -->
        <ul class="items clear-fix">
            <li data-id="0" class="item">one</li>
            <li data-id="1" class="item">two</li>
            <li data-id="2" class="item">three</li>
            <li data-id="3" class="item">four</li>
            <li data-id="4" class="item">five</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
let container = $(".items");
for (var i = 5; i < 500; i++) {
    container.append('<li id="item' + i + '" class="item">' + i + '</li>')
}
// console.log( document.getElementById('item400'))
var waypoint = new Waypoint({
    element: document.getElementById('item30'),
    offset: 0,
    handler: function(e) {
        console.log(this)
        if (e === "down") {
            console.log("从上到下拖动时消失" + e)
        } else {
            console.log("从下到上拖动时出现  " + e)
        }
    }
})
</script>
<script type="text/javascript">
new Sortable($(".items")[0], {
    handle: ".items",
    onStart: function(e) {
        console.log("-----------------------------------------")
        console.log(e);
    },
    onEnd: function(e) {
        console.log(e.oldIndex);
        console.log(e.newIndex);


    }
})

function a() {
    var i = 0;

    function b() {
        i++;
        console.log(this);
        return b;
    }
    return b;
}
a()();
</script>

</html>